<template>
  <div class="addOrEdit">
    <el-dialog
      :before-close="handClose"
      center
      width="30%"
      :title="title"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类名称" prop="shPosition">
              <el-input v-model.number="ruleForm.typeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="rowData.parentId != 0" label="父类选择" prop="shTypeId">
               <el-cascader
                :show-all-levels="false"
                :clearable="true"
                :props="{children: 'list',label: 'typeName',value: 'shTypeId',checkStrictly: true}"
                v-model="ruleForm.parentId"
                :options="options"
                @expand-change="handleChange"
                >
            </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { warehouseType, addKind,editKind } from "@/api/jxc/warehouse.js";
export default {
  name: "addOrEditKind",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        this.$nextTick(() => {
            warehouseType().then(
                res => {
                    console.log("仓库类型级联res", res);
                    this.options = res.data;
                    if (this.title == "修改分类") {
                        console.log(this.findItemByTypeName(this.options, this.rowData.typeName));
                        // this.ruleForm.parentId = this.findItemByParentid(this.options, this.rowData.parentId).shTypeId;
                        this.ruleForm.typeName = this.rowData.typeName;
                        console.log(this.ruleForm.parentId);
                    }
                },
                err => {}
            );
        });
      }
    }
  },
  data() {
    return {
      options: [],
      retainTime: [
        { label: "30分钟", value: "30分钟" },
        { label: "一天", value: "1天" },
        { label: "二天", value: "2天" }
      ],
      rules: {
        notes: [
          { required: true, message: "仓位不能为空", trigger: "blur" },
        ],
        shAddress: [
          { required: true, message: "地址不能为空", trigger: "change" }
        ],
      },
      ruleForm: {
        typeName: "",
        parentId: "",
      }
    };
  },
  methods: {
    findItemByTypeName(arr, typeName){
        var item = "";
        arr.forEach((e) =>{
            if(typeName == e.typeName){
                item = e; 
            }else{
                this.findItemByTypeName(e.list, typeName);
            }
        });
        return item;
    },
    handleChange(row){
        console.log("row", row);
        this.ruleForm.parentId = row[row.length-1];
    },
    handClose() {
      this.$emit("update:off", false);
      console.log(this.$refs.ruleForm);
      this.ruleForm.imageUrl = "";
      this.$refs.ruleForm.resetFields();
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          if (this.title == "新增分类") {
            addKind(this.ruleForm).then(
              res => {
                console.log("res新增仓库成功", res);
                this.$message({
                  type: "success",
                  message: "新增仓库成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {}
            );
          }else{
              let obj = this.rowData;
              obj.typeName = this.ruleForm.typeName;
              editKind(obj).then(
              res => {
                console.log("res修改分类成功", res);
                this.$message({
                  type: "success",
                  message: "修改分类成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {
                  this.$notify({
                      type: "error",
                      message: err.message
                  });
              }
            );
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">

</style>